<template>
  <div>当前的求和值是{{sum}}</div>
  <button @click="sum++">点我++</button>
  <hr/>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{job.j1.salary}}</h2>
  <!-- 
    有报错
    Property "car" was accessed during render but is not defined on instance. at <Demo key=0 > 
  -->
  <h2>座驾信息：{{person.car}}</h2>
  <button type="button" @click="name += '-'">修改名字</button>
  <button type="button" @click="age++">修改年龄</button>
  <button type="button" @click="job.j1.salary++">修改年龄</button>
  <button type="button" @click="showRawPerson">输出原始源数据</button>
  <button type="button" @click="addCar">给人添加一台车</button>
  <button type="button" @click="person.car.name+='+!'">换名字</button>
  <button type="button" @click="changePrice">换价格</button>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive, toRef, toRefs, toRaw, markRaw } from 'vue'

export default {
  name: 'Demo',
  setup() {
    let sum = ref(0)
    let person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    function showRawPerson() {
      const p = toRaw(person)   // 可以获取源数据，但是不是响应式的
      p.age++
      console.log(p)

      // const sum = toRaw(sum) // 报错只支持toRaw
      // console.log(sum)
    }

    function addCar() {
      let car = markRaw({name: "奔驰", prize: "300"})
      person.car = car
      console.log(person)
    }

    function changePrice () {
      person.car.price++
      console.log(person.car.price)
    }

    // 使用toRefs对所有属性进行处理
    return {
      sum,
      person,
      ...toRefs(person),
      showRawPerson,
      addCar,
      changePrice
    }
  }
}
</script>

<style>

</style>
